<template>
    <div>
        <transition name="el-fade-in-linear">
            <div id="welcome" v-show="backgroundShow">
                <div class="background_title">
                    WELCOME TO Z-BLOG
                </div>
                <div class="background_enter" @click="backgroundShow=!backgroundShow">
                    ENTER INDEX (✿◡‿◡)
                </div>

                <div class="background_game" @click="gotoGame">
                    PLAY GAME (ง •_•)ง
                </div>

              <div class="background_game" @click="gotoSnake">
                SNAKE  (°ー°〃)
              </div>
            </div>
        </transition>
        <Header></Header>
        <List list-name="tag"></List>
    </div>
</template>

<script>
    import Header from "@/components/Header";
    import List from "@/components/List";
    export default {
        name: "Index",
        components: {List, Header},
        data(){
            return{
                backgroundShow: true,
            }
        },
        methods:{
            gotoGame:function () {
                window.location.href = './gomoku'
            },
            gotoSnake:function () {
                window.location.href = './snake'
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-fade-in-linear-leave-active{
        transition:all 1.2s ease-out;
    }
    #welcome{
        display: flex;
        flex-direction: column;
        justify-content: center;

        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        box-sizing: border-box;

        margin: auto auto;

        background-color: white;

        .background_title{
            font-size: 32px;
            font-weight: 600;
        }

        .background_enter{
            margin-top: 100px;
            font-size: 26px;
            font-weight: 300;
            color: darkgrey;
            &:hover{
                cursor: pointer;
                font-weight: 400;
                color: grey;
            }
        }

        .background_game{
            margin-top: 20px;
            font-size: 26px;
            font-weight: 300;
            color: darkgrey;
            &:hover{
                cursor: pointer;
                font-weight: 400;
                color: grey;
            }
        }
    }
</style>
